<template>
  <div class="all-right">
    <el-tabs  type="card">
        <el-tab-pane label="已发布" name="first">
          <Item v-for="(item,index) in myList" :key="item.articleId" class="item-container" :myList="myList[index]" ></Item>
        </el-tab-pane>
        <el-tab-pane label="草稿箱" name="second">草稿箱</el-tab-pane>
        <el-tab-pane label="收藏夹" name="third">收藏夹</el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import Item from "../components/item.vue";
import { getMyItem } from "../../../../../api/articles.js"

export default {
  name: '',
  // 接收父组件传入的参数
  props: {},
  // 注册组件
  components: {
    Item
  },
  // 数据
  data() {
    return {
      myList: []//用户的文章列表
    }
  },
  // 属性值计算
  computed: {},
  // 数据侦听
  watch: {},
  // vue实例被创建时
  created() {
    this.loadMyList()
  },
  // vue实例被挂载至dom上时
  mounted () {},
  // 实例方法
  methods: {
    //获取用户文章列表
    loadMyList() {
      getMyItem().then(res => {
        this.myList = res.data.data.list
        console.log(this.myList)
      });
    }
  },
  // keep-alive之后页面会缓存，不会执行created(),和mounted(),但是会执行activated()
  activated () {},
  // 退出的生命周期钩子
  deactivated () {},
  // 销毁
  destroyed () {},
}
</script>
<style lang='less' scoped>
.all-right {
  display: inline-block;
  // width: 42vw;
  // height: 90vh;
  background-color: transparent;
  position: relative;
  top: -91vh;
  left: 37vw;
  ::v-deep .el-tabs {
    width: 36.5vw;
    height: 90vh;
    background-color: transparent;
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav-wrap.is-scrollable {
    padding: 0;
    box-sizing: border-box;
    }
    .is-scrollable {
      padding: 0;
    }
    .el-tabs__nav-scroll {
      background: rgba(213, 237, 161, 1);
      border-radius: 10px 10px, 0px, 0px;
      .el-tabs__item {
        width: 12.3vw;
        font-size: 18px;
        padding: 0 4vw;
        font-weight: 500;
        color:  rgba(125, 128, 145, 1);
      }
      .el-tabs__item.is-active {
        color: rgba(13, 128, 120, 1);
      }
    }

  }
}
</style>